<template>
  <cube-page type="button-view" :title="projectBaseInfo.name">
    <div slot="content">
      <div class="zuipagesubWrap" :style="{'minHeight': getlistHeight}">
        <div class="ztopWrap">
          <div class="ztit" @click="showIntro">
            <span>项目简介</span>
            <i class="cubeic-pulldown" v-show="!showIntroFlag"></i>
            <i class="cubeic-pullup" v-show="showIntroFlag"></i>
          </div>
          <div class="zintroduction" :class="{act: showIntroFlag}">
            {{summary}}
          </div>
        </div>

        <div class="zcontent">
          <h4>完成情况</h4>
          <div class="ztable">
            <table>
              <colgroup>
                <col width="" />
                <col width="15%" />
                <col width="16%" />
                <col width="16%" />
                <col width="16%" />
                <col width="16%" />
              </colgroup>
              <thead>
                <tr>
                  <th><div class="cell">部门</div></th>
                  <th><div class="cell">总进<br>药点</div></th>
                  <th><div class="cell">已完成<br>第二次</div></th>
                  <th><div class="cell">已完成<br>第一次</div></th>
                  <th><div class="cell">开票率</div></th>
                  <th><div class="cell">成功率</div></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index" @click="goDetail(item, index)">
                  <td><div class="cell depart">{{item.depart}}</div></td>
                  <td><div class="cell">{{item.total}}</div></td>
                  <td><div class="cell">{{item.second}}</div></td>
                  <td><div class="cell">{{item.first}}</div></td>
                  <td><div class="cell">{{item.billingRate}}</div></td>
                  <td><div class="cell">{{item.succRate}}</div></td>
                </tr>
                <tr>
                  <td><div class="cell depart">总计</div></td>
                  <td><div class="cell">{{totalize.total}}</div></td>
                  <td><div class="cell">{{totalize.second}}</div></td>
                  <td><div class="cell">{{totalize.first}}</div></td>
                  <td><div class="cell">{{totalize.billingRate}}</div></td>
                  <td><div class="cell">{{totalize.succRate}}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <cube-view></cube-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zProjectInfo} from '@/util/api';

export default {
  name: 'ProjectInfo',
  components: {
    CubeView,
    CubePage
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      showLoading: true,
      tableData: [],
      getlistHeight: this.zutil.getlistHeight(44),
      summary: '',
      projectBaseInfo: {
        id: '',
        name: ''
      },
      showIntroFlag: false,
      totalize: {
        total: '',
        second: '',
        first: '',
        billingRate: '',
        succRate: '',
      }
    }
  },
  created () {

  },
  mounted() {
    let projectBaseInfo = this.zutil.lStorage.getParam('lst_projectBaseInfo');
    if(projectBaseInfo){
      this.projectBaseInfo = JSON.parse(projectBaseInfo);
      this.fetchList();
    }else{
      this.$createToast({type: 'error', time: 1000, txt: "未获取到项目id！"}).show();
      setTimeout(()=>{
        this.$router.back();
      }, 1000)
    }
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    async fetchList () {

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zProjectInfo({id: this.projectBaseInfo.id});
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();

      if(res.code == '0000'){
        this.tableData = res.data.list;
        this.summary = res.data.summary;
        this.totalize = res.data.total;
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取缺货信息列表失败！"}).show();
      }
    },
    goDetail (item, index) {
      this.zutil.lStorage.setParam('lst_projectInfo', JSON.stringify(item));
      this.$router.push(`/project/projectInfo/projectdetail`);
    },
    showIntro () {
      this.showIntroFlag = !this.showIntroFlag;
    }
  }
}
</script>

<style scoped lang="scss">

.zuipagesubWrap {
  background: #fff;
  padding-top: 10px;
  .ztopWrap {
    .ztit {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      border: 1px solid #ddd;
      width: 200px;
      margin: 0 auto 14px;
      border-radius: 3px;
      box-shadow: 4px 4px 0 rgba(64, 158, 255, 0.2);
      span {

      }
      i {

      }
    }
    .zintroduction {
      font-size: 13px;
      height: 0;
      overflow: hidden;
      text-indent: 2em;
      line-height: 22px;
      background: #ddd;
      letter-spacing: 1.2px;
      // transition: height ease .3s;
      &.act {
        height: auto;
        padding: 10px;
      }
    }
  }
  .zcontent {
    padding-top: 10px;
    border-top: 1px solid #ddd;
    h4 {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      border: 1px solid #ddd;
      width: 200px;
      margin: 0 auto 10px;
      border-radius: 3px;
      box-shadow: 4px 4px 0 rgba(64, 158, 255, 0.2);
    }
    .ztable {
      table {
        width: 100%;
        tr {
          background-color: #fff;
        }
        td, th {
          padding: 12px 0;
          min-width: 0;
          box-sizing: border-box;
          text-overflow: ellipsis;
          vertical-align: middle;
          position: relative;
          text-align: left;
          border-bottom: 1px solid #ebeef5;
          border-right: 1px solid #ebeef5;
          &:last-child {
            border-right: 0;
          }
        }
        .cell {
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          line-height: 23px;
          padding-left: 10px;
          padding-right: 10px;
        }
        thead {
          color: #909399;
          font-weight: 500;
          th {
            overflow: hidden;
            user-select: none;
            background-color: #fff;
            border-top: 1px solid #ebeef5;
            background-color: #cd6d6d;
            color: #fff;
            .cell {
              display: inline-block;
              box-sizing: border-box;
              position: relative;
              vertical-align: middle;
              padding-left: 10px;
              padding-right: 10px;
              width: 100%;

              &.depart {

              }
            }
          }
        }
        tbody {
          tr:nth-child(2n){
            td {
              background: #fafafa;
            }
          }
        }
      }
    }
  }
}

.scroll-list-wrap {
  .zcardWrap .zcard .zcardRow .zlabel {
    width: 2.9rem;
  }
}

</style>
